<template>
    <div>
        <div style="width: 500px; margin: 80px 200px 0px 0px; padding-left: 400px">
            <el-form label-width="100px" class="demo-dynamic">
                <el-row :gutter="24">
                        <el-col :span="12"><img :src="'http://127.0.0.1:5000/imgcode/' + uuid" @click="getimagecode" /></el-col>
                        <el-col :span="12">
                            <el-input v-model="imagecode" placeholder="图片验证码"></el-input></el-col>
                    </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content bg-purple">
                            <el-input placeholder="请输入手机号" v-model="mobile"><template slot="append"><el-button
                                        @click="sendsms" :disabled="flag">{{ message }}</el-button></template></el-input>
                        </div>
                    </el-col>
                </el-row>
                
                <el-row :gutter="24">
                    <el-col :span="24"><el-input v-model="mcode" placeholder="手机验证码"></el-input></el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <a :href="url">微博登录</a>
    </div>
</template>
  
<script>
import { v4 as uuid4 } from "uuid";
export default {
    data() {
        return {
            uuid: "",
            imagecode: "",
            mobile: "",
            mcode: "",
            message: "发送验证码",
            flag: false,
            time: 10,
            url: ""
        };
    },
    mounted() {
        this.getimagecode();
        // this.geturl()
    },
    methods: {
        geturl() {
            this.axios.get("user/getWBurl")
                .then(res => {
                    this.url = res.data.url
                })
        },
        getimagecode() {
            this.uuid = uuid4()
            console.log(">>>",this.uuid)
        },
        sendsms() {
            // 正则判断手机号合法，图片验证码
            var reg = /^1[3-9]\d{9}$/
            if (!reg.test(this.mobile)) {
                alert("手机号格式不正确")
                return false
            }
            if (this.imagecode == "" || this.imagecode == null) {
                alert("图片验证码不能为空")
                return false
            }
            var data = { "mobile": this.mobile, "imagecode": this.imagecode, "uuid": this.uuid }
            this.axios.post("sendsms", data)
                .then(res => {
                    // 发送成功后开启倒计时，发送验证码变成60，59，当数字为0，按钮变成不可以用的状态
                    if (res.data.code == 200) {
                        this.flag = true
                        var t = setInterval(() => {
                            if (this.time == 0) {
                                clearInterval(t)
                                this.time = 10
                                this.message = "发送验证码"
                                this.flag = false
                            } else {
                                this.time--
                                this.message = this.time + "秒"
                                this.flag = true
                            }
                        }, 1000)
                    }
                })
        },
        submit() {
            var data = { "mobile": this.mobile, "code": this.mcode }
            this.axios.post("login", data).then(res => {
                if (res.data.code == 200) {
                    localStorage.setItem("token", res.data.token)
                    localStorage.setItem("userid", res.data.userid)
                    alert(res.data.msg)
                    this.$router.push("/")
                } else {
                    alert(res.data.msg)
                }

            })
        }
    },
};
</script>
  
<style></style>